import type { FormProps } from 'antd';
import { Button, Form, Input, Space } from 'antd';
import { Link } from 'react-router-dom'

type FieldType = {
  username: string;
  password: string;
  againPassword: string;
  nickname: string;
};

function PageEntry() {
  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
  };

  return <div className="w-500px mx-auto mt-100px">
    <Form 
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      onFinish={onFinish}
    >
      <Form.Item<FieldType>
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input placeholder='请输入用户名' allowClear />
      </Form.Item>

      <Form.Item<FieldType>
        label="昵称"
        name="nickname"
        rules={[{ required: true, message: '请输入昵称' }]}
      >
        <Input placeholder='请输入昵称' allowClear />
      </Form.Item>

      <Form.Item<FieldType>
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input.Password placeholder='请输入密码' allowClear />
      </Form.Item>

      <Form.Item<FieldType>
        label="确认密码"
        name="againPassword"
        dependencies={['password']}
        rules={[
          { required: true, message: '请输入密码' },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('两次输入的密码不一致'));
            },
          })
        ]}
      >
        <Input.Password placeholder='请输入密码' allowClear />
      </Form.Item>
      

      <Form.Item label={null}>
        <Space>
          <Button type="primary" htmlType="submit">
            注册
          </Button>
          <Link to="/login">已有账号？去登录</Link>
        </Space>
      </Form.Item>
    </Form>
  </div>
}

export default PageEntry;